<template>
	<view style="padding: 40rpx;background-color: #aaaaff;">
		<u-navbar :is-back='false' title="文采风流今尚存"></u-navbar>
		<view style='margin-bottom: 25rpx;'>
			<u-search style='width: 100%;' placeholder="作者|文章标题" height='70' v-model="keyword" :show-action="false"
				@search='searchArticle' @clear='clearSearch'>
			</u-search>
		</view>
		<u-tabs style='border-radius: 15rpx;' :list="list" :is-scroll="false" :current="current" @change="change">
		</u-tabs>
		<view v-for="item,key in userInfos">
			<Remark :userInfo='item'></Remark>
		</view>
		<u-loadmore :status="pullDownRefresh.status" color='#FFFFFF' :icon-type="pullDownRefresh.iconType"
			@loadmore="loadmore" :load-text="pullDownRefresh.loadText" style="text-align: center;margin: 20rpx;" />
	</view>
</template>


<script>
	import Remark from './remark.vue'
	let timer = null;
	export default {
		data() {
			return {
				setColor: {
					fontColor: "",
					backgroundcolor: ""
				},
				keyword: "",
				list: [{
					name: '关注'
				}, {
					name: 'Hot'
				}, {
					name: '最新',
					count: 5
				}],
				current: 0,
				scrollTop: 0,
				pullDownRefresh: {
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻点刷新',
						loading: '正在加载,请喝杯茶',
						nomore: '我也是有底线的'
					}
				},
				userInfos: [{
						avatarUrl: 'https://ljy-picgo-1.oss-cn-shanghai.aliyuncs.com/img/20210514093054.jpg',
						username: "金大吉",
						nickname: '火锅',
						createTime: "2021-05-14 01:11:11",
						title: "将进酒",
						content: '君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪,人生得意须尽欢,莫使金樽空对月,天生我材必有用,千金散尽还复来。'
					},
					{
						avatarUrl: 'https://ljy-picgo-1.oss-cn-shanghai.aliyuncs.com/img/20210428162157.jpg',
						username: "沈大利",
						nickname: '大利',
						title: "陋室铭",
						createTime: "2021-04-24 22:22:22",
						content: '山不在高， 有仙则名。 水不在深， 有龙则灵。 斯是陋室， 惟吾德馨。 苔痕上阶绿， 草色入帘青。 谈笑有鸿儒， 往来无白丁。 可以调素琴， 阅金经。 无丝竹之乱耳， 无案牍之劳形。 南阳诸葛庐， 西蜀子云亭。 孔子云： 何陋之有？'
					}
				]
			}
		},
		onLoad() {
			console.log("数据库查找 关注列表的文章");
			console.log(this.userInfos);
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			console.log("刷新页面");

		},
		onReachBottom() {
			console.log("上拉加载");
			if (this.pullDownRefresh.status == 'loadmore') {
				timer = setTimeout(() => this.loadmore(), 500)
				console.log(timer);
			}
		},
		components: {
			Remark
		},

		methods: {
			loadmore() {
				console.log("触发");
				this.pullDownRefresh.status = "loading"
				// remarkUtils.timeAgo("2020-01-12 20:10:15");

			},
			change(index) {
				this.current = index;
				if (index == 0) {
					console.log("关注用户");
				} else if (index == 1) {
					console.log("热门博客");
				} else if (index == 2) {
					console.log("最新博客");
				}
			},
			searchArticle(data) {
				console.log(data);
			}
		}

	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
